<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <my-btn @total="allCount()"></my-btn>
    <my-btn @total="allCount()"></my-btn>
    <p>所有按钮点击了{{totalCount}}次</p>
</div>

<!--子组件-->
<template id="my_btn">
    <button @click="total()">点击了{{count}}次</button>
</template>

<script src="js/vue.js"></script>
<script>
    /*********儿子给爸爸传值****************/
    Vue.component('my-btn',{
        
        template:'#my_btn',
        data(){
            return {
                count:0
            }
        },
       methods :{
           total(){
               this.count +=1;
               //通知外界我调用了这个方法
               this.$emit('total');
               
           }
       }
    });
    
    new Vue({
        el:"#app",
        data:{
            totalCount :0
        },
        methods:{
            allCount(){
                this.totalCount += 1;
            }
            
        }
    });
    
</script>
</body>
</html>